<template>
  <div class="page">
    <!-- <m-header title="淘金区块矿" :icon="'iconfont iconqkk_icon_sy'"></m-header> -->
    <section class="body index-bg">
      <div class="page-banner">
        <img class="page-banner-bg-1" src="../../assets/images/new/p0.png" />
        <img class="page-banner-bg-2" src="../../assets/images/new/p2.png" />
<!--        <swiper-->
<!--          :options="swiperOption"-->
<!--          class="swiper-wrap swiper-container-banner-box"-->
<!--          v-if="banner.length!=0"-->
<!--        >-->
<!--          <swiper-slide-->
<!--            v-for="(item, index) in banner"-->
<!--            :key="index"-->
<!--          >-->
<!--            <img-->
<!--              :src="api+item"-->
<!--              class="title-img"-->
<!--            />-->
<!--          </swiper-slide>-->
<!--          &lt;!&ndash; 常见的小圆点 &ndash;&gt;-->
<!--          <div-->
<!--            class="swiper-pagination"-->
<!--            v-for="(item,index) in banner"-->
<!--            :key="index"-->
<!--            slot="pagination"-->
<!--          ></div>-->
<!--        </swiper>-->
      </div>
      <m-header class="m-titl" title="竞拍门票总类" :canback="Boolean(0)"></m-header>
      <div
        class="list"
        v-if="list.length!=0"
      >
        <div
          class="item"
          v-for="(item,index) in list"
          :key="item.id"
        >
          <div class="img-wrap">
            <img
              :src="api+item.images"
              class="img"
            />
            <!-- <div
              class="tag type-btn btn-origin"
              @click="blockOreSpeed(item.level)"
            >加速</div> -->
          </div>
          <ul class="con-wrap">
            <li class="title">{{item.levelname}}</li>
            <li>
              <span class="name">价值：</span>
              {{item.min_price}}-{{item.max_price}}
            </li>
            <li>
              <span class="name">竞拍时间</span>
              {{formatTime(item.stime)}}-{{formatTime(item.etime)}}
            </li>
            <li>
              <span class="name">预约{{coinTxt&&coinTxt['credit1_text']}}：</span>
              {{parseInt(item.money)}}
            </li>
            <li>
              <span class="name">智能合约收益：</span>
              {{item.days}}天/{{parseInt(item.per)}}%
            </li>
            <li>
              <span class="name">可获{{coinTxt&&coinTxt['credit2_text']}}：</span>
              {{parseInt(item.credit2)}}张
            </li>
            <li>
              <span class="name">可获{{coinTxt&&coinTxt['credit4_text']}}：</span>
              {{parseInt(item.credit4)}}张
            </li>
          </ul>
          <div class="btns">
            <div
              v-if="item.isbooking ==0&&item.cd_status!=0"
              :class="{'type-btn btn-origin':true,'btn-origin':item.cd_status == 0}"
              @click="event(item.isbooking,item.level,item.cd_status,item.cd_time)"
            >{{setTimeDown(item.isbooking,item.cd_status,item.cd_time,item.minutes,item.seconds,item.level,index)}}</div>
            <div
              v-else-if="item.isbooking ==1&&item.cd_status!=0"
              :class="{'type-btn btn-origin':true,'btn-origin':item.status !=-1&&item.isbooking == 1,'btn-origin':item.status ==-1||item.isbooking==1,'btn-red':item.cd_status == 0,'btn-red':item.cd_status ==-1&&item.isbooking==1}"
              @click="event(item.isbooking,item.level,item.cd_status)"
            >{{setTimeDown(item.isbooking,item.cd_status,item.cd_time,item.minutes,item.seconds,item.level,index)}}</div>
            <div
              v-else-if="item.isbooking ==2&&item.cd_status!=0"
              class="type-btn btn-origin"
            >敬请等待</div>
            <div
              v-else-if="item.isbooking ==3&&item.cd_status!=0"
              class="type-btn btn-origin"
            >{{coinTxt&&coinTxt['mining_text']}}</div>
            <div
              v-else-if="item.isbooking ==4&&item.cd_status!=0"
              :class="{'type-btn btn-origin':true,'btn-origin':item.isbooking!=2||item.isbooking!=3,'btn-origin':item.cd_status == 0}"
              @click="event(item.isbooking,item.level,item.cd_status,item.cd_time)"
            >{{setTimeDown(item.isbooking,item.cd_status,item.cd_time,item.minutes,item.seconds,item.level,index)}}</div>
            <div
              v-else-if="item.cd_status==0"
              :class="{'type-btn btn-origin':true,'btn-origin':item.isbooking!=2||item.isbooking!=3,'btn-origin':item.cd_status == 0}"
              @click="event(item.isbooking,item.level,item.cd_status,item.cd_time)"
            >{{downMinute}}:{{downSecond}}</div>
            <div class="type-btn btn-origin" :class="{'disabled btn-red':item.is_speed===1}" @click="blockOreSpeed(item.level)">{{item.is_speed===1?'已加速':'加速'}}</div>
          </div>
        </div>
      </div>
      <p
        v-else
        class="msg"
      >{{msg}}</p>
      <!-- <swiper
        :options="swiperOption2"
        class="list swiper-wrap"
        v-if="list.length!=0"
        ref="mySwiper"
      >
        <swiper-slide v-for="(item,index) in list" :key="index">
          <div class="swiper-myitem">
            <div class="list-con">
              <div class="img-wrap">
                <img :src="api+item.images" class="img" />
              </div>
              <ul class="con-wrap">
                <li class="title">{{item.levelname}}</li>
                <li>
                  <span class="name">價值：</span>
                  {{item.min_price}}-{{item.max_price}}
                </li>
                <li>
                  <span class="name">競拍时間：</span>
                  {{formatTime(item.stime)}}-{{formatTime(item.etime)}}
                </li>
                <li>
                  <span class="name">預約{{coinTxt&&coinTxt['credit1_text']}}：</span>
                  {{parseInt(item.money)}}
                </li>
                <li>
                  <span class="name">合約轉會收益：</span>
                  {{item.days}}天/{{parseInt(item.per)}}%
                </li>
                <li>
                  <span class="name">可獲{{coinTxt&&coinTxt['credit2_text']}}：</span>
                  {{parseInt(item.credit2)}}枚
                </li>
                <li>
                  <span class="name">可獲{{coinTxt&&coinTxt['credit4_text']}}：</span>
                  收益{{parseInt(item.credit4)}}%
                </li>
              </ul>
            </div>
            <div class="btns">
              <div
                v-if="item.isbooking ==0&&item.cd_status!=0"
                :class="{'type-btn btn-origin':true,'btn-origin':item.cd_status == 0}"
                @click="event(item.isbooking,item.level,item.cd_status,item.cd_time)"
              >{{setTimeDown(item.isbooking,item.cd_status,item.cd_time,item.minutes,item.seconds,item.level,index)}}</div>
              <div
                v-else-if="item.isbooking ==1&&item.cd_status!=0"
                :class="{'type-btn btn-origin':true,'btn-origin':item.status !=-1&&item.isbooking == 1,'btn-origin':item.status ==-1||item.isbooking==1,'btn-red':item.cd_status == 0,'btn-red':item.cd_status ==-1&&item.isbooking==1}"
                @click="event(item.isbooking,item.level,item.cd_status)"
              >{{setTimeDown(item.isbooking,item.cd_status,item.cd_time,item.minutes,item.seconds,item.level,index)}}</div>
              <div
                v-else-if="item.isbooking ==2&&item.cd_status!=0"
                class="type-btn btn-origin"
              >敬请等待</div>
              <div
                v-else-if="item.isbooking ==3&&item.cd_status!=0"
                class="type-btn btn-origin"
              >{{coinTxt&&coinTxt['mining_text']}}</div>
              <div
                v-else-if="item.isbooking ==4&&item.cd_status!=0"
                :class="{'type-btn btn-origin':true,'btn-origin':item.isbooking!=2||item.isbooking!=3,'btn-origin':item.cd_status == 0}"
                @click="event(item.isbooking,item.level,item.cd_status,item.cd_time)"
              >{{setTimeDown(item.isbooking,item.cd_status,item.cd_time,item.minutes,item.seconds,item.level,index)}}</div>
              <div
                v-else-if="item.cd_status==0"
                :class="{'type-btn btn-origin':true,'btn-origin':item.isbooking!=2||item.isbooking!=3,'btn-origin':item.cd_status == 0}"
                @click="event(item.isbooking,item.level,item.cd_status,item.cd_time)"
              >距離競拍{{downMinute}}:{{downSecond}}</div>
            </div>
          </div>
        </swiper-slide>
      </swiper> -->

    </section>
    <div
      class="mining-layer"
      v-show="quitFlag"
    >
      <div class="mining-con">
        <img
          class="mining-img"
          :src="miningSrc"
          alt
        />
        <i
          class="iconfont iconclose"
          @click="quitMin"
        ></i>
      </div>
    </div>
    <m-Footer></m-Footer>
    <m-load ref="load"></m-load>
    <m-model
      ref="article"
      :content="newArticle.contents"
      :isHtml='true'
      confirmColor='#fff'
      :showCancel='false'
      confirmText='关闭'
    ></m-model>
    <m-model
      ref="tips"
      :content="tipsContent"
      class="tips-model"
      title='抢购结果'
      :isHtml='true'
      confirmColor='#fff'
      :showCancel='false'
      confirmText='关闭'
    ></m-model>
  </div>
</template>
<script>
  import { swiper, swiperSlide } from "vue-awesome-swiper";
  import { Init, Index, Base } from '@/server/server.js';
  import { Util, Load } from '@/assets/commonjs/utils.js';
  import { mapGetters, mapMutations } from 'vuex';
  import mModel from '@/components/model'
  require("swiper/dist/css/swiper.css"); //引入swiper.css
  const successImg = require('@/assets/images/success.png')
  const failImg = require('@/assets/images/fail1.png')
  export default {
    components: {
      swiper,
      swiperSlide,
      mModel
    },
    data() {
      return {
        list: [],
        levelArr: [],
        timeInt: null,
        mineInt: null,
        mineFlag: true,
        bookFlag: true,
        orderFlag: true,
        msg: null,
        noticeList: [],
        noticeTime: 0,
        defaultBanner: require('@/assets/images/gzlz/banner.png'),
        swiperOption: {
          loop: true,
          autoplay: {
            delay: 2500,
            stopOnLastSlide: false,
            /* 触摸滑动后是否继续轮播 */
            disableOnInteraction: false
          },
          // 分页器设置
          pagination: {
            el: ".swiper-pagination",
            clickable: true,
            type: "bullets"
          }
        },
        swiperOption2: {
          loop: true,
          effect: 'coverflow',
          slidesPerView: 2,
          centeredSlides: true,
          observer: true,
          observeParents: true,
          observeSlideChildren: true,
          coverflow: {
            rotate: 0,
            stretch: 0,
            depth: 0,
            modifier: 2,
            slideShadows: false,
          }
        },
        banner: [],
        miningSrc: require('@/assets/images/gzlz/mining.gif'),
        quitFlag: false,
        mineTime: null,
        resultInt: null,
        randomTime: null,
        lastTime: null,
        level: null,
        downMinute: '--',
        downSecond: '--',
        curTime: null, //最后接口请求的时间
        newArticle: {
          title: '',
          contents: ''
        },
        tipsContent:''
      }
    },
    created() {
      this.getNewArticle()
    },
    mounted() {
      this.initData();
      if (!this.coinTxt)
        this.getText()
      this.getMine();
      this.getTip()
      this.mineInt = setInterval(() => {
        this.getMine();
        this.getTip()
      }, 60000);
      // this.getTitle();
      if (!this.bannerSrc)
        this.getBanner();
    },
    computed: {
      ...mapGetters(['uid', 'api', 'bannerSrc', 'coinTxt', 'proData', 'firstInfo']),
      // mySwiper() {
      //   return this.$refs.mySwiper.swiper
      // }
    },
    watch: {
      // list() {
      //   if (this.mySwiper) {
      //     console.log(this.mySwiper)
      //     this.$nextTick(() => {
      //       this.mySwiper.loopDestroy()
      //       this.mySwiper.loopCreate()
      //     })
      //   }
      // }
    },
    methods: {
      // 加速
      blockOreSpeed(level) {
        Load.loadStart(this);
        Index.postBlockOreSpeed({ level: level }).then(res => {
          this.getMine();
          Load.loadEnd(this);
          mui.toast(res.msg)
        }).catch(erro=>{
          Load.loadEnd(this);
        })
      },
      // 计算广告轮播的速度
      noticeCarousel() {
        let str = ''
        let noticeWidth = document.getElementsByClassName('notice-inner')[0].clientWidth || document.getElementsByClassName('notice-inner')[0].offsetWidth
        let noticeBoxWidth = document.getElementsByClassName('notice-box')[0].clientWidth || document.getElementsByClassName('notice-box')[0].offsetWidth
        if (noticeWidth < noticeBoxWidth) {
          this.noticeTime = 5
        } else {
          this.noticeTime = (noticeWidth / noticeBoxWidth) * 5
        }
      },
      // 获取弹窗
      getNewArticle() {
        Index.getNewArticle().then(res => {
          if (res.code === 1) {
            res.data.contents = res.data.contents.replace(/\<img/gi, '<img style="max-width:100%;height:auto";display:block;')
            this.newArticle = res.data
            if (this.newArticle.contents != '' && this.firstInfo) {
              this.$refs.article.open()
              this.setFirstInfo()
            }
          }
        })
      },
      initData() {
        this.banner = this.proData && this.proData.home_top_banner || [require('@/assets/images/new/banner.png')];
        Load.loadStart(this);
        this.randomTime = parseInt(Math.random() * 20);
      },
      ...mapMutations(['saveBanner', 'saveCoinTxt', 'setFirstInfo']),
      /**
       * 获取币中名称与按钮
       */
      getText() {
        Base.getText().then(res => {
          if (res.code == 1) {
            this.saveCoinTxt(res.data);
            localStorage.setItem('coinTxt', JSON.stringify(res.data))
          }
        })
      },
      refresh() {
        this.getMine();
        setTimeout(() => {
          this.$refs.my_scroller.finishPullToRefresh();
          mui.toast('加载完毕！')
        }, 1000);
      },
      infinite() {
      },
      goTo(routeName) {
        this.$router.push({ name: routeName });
      },
      getTitle() {
        Index.getTitle({ type: 'mh' }).then(res => {
          if (res.code == 1) {
            this.noticeList = res.data;
            this.$nextTick(() => {
              this.noticeCarousel()
            })
          } else {
            mui.toast(res.msg);
          }
        })
      },
      notice() {
        this.$router.push({ name: 'Notice', query: { type: 'mh' } });
      },
      getBanner() {
        // Index.getBanner().then(res=>{
        //     if(res.code == 1){
        //       if(res.data && res.data.banner_img && res.data.banner_img!='')
        //       this.saveBanner(res.data.banner_img)
        //     }
        // })
      },
      // 矿机列表
      async getMine() {
        if (!this.orderFlag)
          return;
        let _This = this;
        this.levelArr = [];
        this.orderFlag = false;
        await Index.getMine().then(res => {
          if (res.code == 1) {
            Load.loadEnd(this);
            this.orderFlag = true;
            this.curTime = res.time;
            this.list = []

            if (res.data && res.data.length > 0) {
              for (let i = 0; i < res.data.length; i++) {
                if (res.data[i].cd_status == 0) {
                  this.setTimeDown(res.data[i].isbooking, res.data[i].cd_status, res.data[i].cd_time, res.data[i].minutes, res.data[i].seconds, res.data[i].level, i)
                  break;
                }
              }
              this.list = res.data
            }
            // setTimeout(() => {
            //     document.getElementsByClassName('swiper-slide-prev')[1].firstChild.lastChild.style.display = 'none';
            //     document.getElementsByClassName('swiper-slide-next')[1].firstChild.lastChild.style.display = 'none';
            //     document.getElementsByClassName('swiper-slide-active')[1].firstChild.lastChild.style.display = 'block';
            // }, 500);
          } else {
            Load.loadEnd(this);
            this.orderFlag = true;
            this.msg = res.msg;
            mui.toast(res.msg);
            return;
          }
        })
      },
      // 查询抢购是否成功
      getTip(){
        Index.getTip().then(res=>{
          if(res.code===1&&res.data.status){
            this.tipsContent = res.data.status
            if(res.data.status=='success'){
              this.tipsContent =  `<img  src="${successImg}" />`
            }else if(res.data.status=='fail'){
              this.tipsContent =  `<img  src="${failImg}" />`
            }
            this.$refs.tips.open()
          }
        })
      },
      formatTime(time) {
        return Util.formatTime(time).substr(0, 5)
      },

      //下单
      event(status, level, cdStatus, cdTime) {
        switch (status) {
          case 0:
            // let min = new Date(cdTime * 1000).getMinutes() - new Date(this.curTime * 1000).getMinutes();
            // if (min <= 5) return;
            // this.booking(level);
            // break;
            let hou = new Date(cdTime * 1000).getHours() - new Date(this.curTime * 1000).getHours();
            let min = new Date(cdTime * 1000).getMinutes() - new Date(this.curTime * 1000).getMinutes();
            if (min < 0) {
              min = 0;
            }
            if (hou > 0) {
              min += hou * 60;
            }
            // console.log('cdTime', new Date(cdTime * 1000).getHours(), new Date(cdTime * 1000).getMinutes());
            // console.log('curTime', new Date(this.curTime * 1000).getHours(), new Date(this.curTime * 1000).getMinutes());
            console.log('min', min);
            if (min <= 0) return;
            this.booking(level);
            break;
          case 1:
            if (cdStatus == 0 || cdStatus == -1)
              return;
            this.mining(level);
            // if(isbooking==1 ||isbooking ==2){
            //   this.$router.push({name:'StartMining',params:{level}});
            // }
            // this.$router.push({name:'StartMining'});
            break;
          case 4:
            if (cdStatus == 0 || cdStatus == -1)
              return;
            this.mining(level);
            // this.$router.push({name:'StartMining',params:{level}});
            break;
        }
      },

      // 升级
      booking(level) {
        console.log('level', level)
        // return ;
        if (!this.bookFlag)
          return;
        this.bookFlag = false;
        Load.loadStart(this);
        Index.booking({ level }).then(res => {
          if (res.code == 1) {
            this.bookFlag = true;
            Load.loadEnd(this);
            mui.toast(res.msg);
            this.getMine();
          } else {
            this.bookFlag = true;
            Load.loadEnd(this);
            mui.toast(res.msg);
          }
        })
      },
      setTimeDown(isbooking, status, cdTime, minutes, seconds, level, index) {
        let time = String(new Date().getTime()).substr(0, 10);
        // console.log(Number(time),cdTime)
        switch (String(status)) {
          case '-1':  //-1表示不倒计时的时间段内，不能飞升
            if (isbooking == 0) {
              // let min = new Date(cdTime * 1000).getMinutes() - new Date(this.curTime * 1000).getMinutes();
              // if (min <= 5) return this.coinTxt && this.coinTxt['wait_mine_text']
              // else return this.coinTxt && this.coinTxt['booking_text']
              // return this.coinTxt && this.coinTxt['booking_text']
              let hou = new Date(cdTime * 1000).getHours() - new Date(this.curTime * 1000).getHours();
              let min = new Date(cdTime * 1000).getMinutes() - new Date(this.curTime * 1000).getMinutes();
              if (min < 0) {
                min = 0;
              }
              if (hou > 0) {
                min += hou * 60;
              }
              // console.log('cdTime', new Date(cdTime * 1000).getMinutes())
              // console.log('curTime', new Date(this.curTime * 1000).getMinutes())
              // console.log('min',min)
              if (min <= 0) {   //等待匹配
                return this.coinTxt && this.coinTxt['wait_mine_text']  // //等待匹配
              } else if (min > 0) { //可預約
                return this.coinTxt && this.coinTxt['booking_text']   //可預約
              } else {
                return this.coinTxt && this.coinTxt['booking_text']
              }

            } else if (isbooking == 1) {
              return this.coinTxt && this.coinTxt['booked_text']   //已預約
            } else if (isbooking == 4) {
              return this.coinTxt && this.coinTxt['booking_text']
            }
            // else {
            //   return '已升级'
            // }
            break;
          case '0': //0表示还在倒计时
            console.log('0')
            clearInterval(this.timeInt)
            this['level' + level] = {
              minutes, seconds
            }
            this.setDown(this['level' + level], index);
            return '距離競拍' + this['level' + level].minutes + ':' + this['level' + level].seconds;
            break;
          case '1':  //1表示倒计时结束开始飞升
            return this.coinTxt && this.coinTxt['wait_mine_text']
            break;
          case '2':  //2表示倒计时结束处于飞升中的时间段
            return this.coinTxt && this.coinTxt['mine_grab_text']
            break;
        }
      },
      // 抢矿
      mining(level) {
        return;
        this.result = null;
        Load.loadStart(this);
        if (!this.mineFlag)
          return;
        this.mineFlag = false;
        Index.mining({ level }).then(res => {
          if (res.code == 1) {
            this.mineFlag = true;
            Load.loadEnd(this);
            // this.$router.push({name:'StartMining',params:{level}});
            this.level = level;
            this.startMining();
          } else {
            this.mineFlag = true;
            Load.loadEnd(this);
            mui.confirm(res.msg);
            return;
          }
        })
      },
      // 矿机开抢倒计时
      setDown(obj, level) {
        console.log('setDown')
        obj.seconds += 1;
        // let timeInt =null;
        // clearInterval(timeInt);
        this.timeInt = setInterval(() => {
          // console.log(obj.seconds)
          // if (!document.getElementsByClassName('list-con')[0]) {
          //   clearInterval(this.timeInt);
          // }
          if (obj.seconds == 0 && obj.minutes == 0) {
            clearInterval(this.timeInt);
            this.getMine();
            return;
          }
          if (obj.seconds < 10) {
            // console.log(obj.seconds)
            obj.seconds = '0' + Number(obj.seconds);
          }
          if (obj.minutes < 10) {
            // console.log(obj.minutes)
            obj.minutes = '0' + Number(obj.minutes);
          }
          if (obj.seconds > 0) {
            obj.seconds = obj.seconds - 1;
            if (Number(obj.seconds) < 10) {
              obj.seconds = '0' + Number(obj.seconds);
            }
          } else {
            if (obj.minutes > 0) {
              obj.minutes = obj.minutes - 1;
              if (obj.minutes < 10) {
                obj.minutes = '0' + Number(obj.minutes);
              }
              obj.seconds = 59;
            } else {
              // console.log('else')
              // obj.seconds = 0;
              // obj.minutes = 0;
              // clearInterval(timeInt);
              // this.getMine();
            }
          }
          if (obj.minutes == 0 && obj.seconds == 0) {
            // document.getElementsByClassName('list-con')[level+3].nextElementSibling.children[0].innerText = this.coinTxt['mine_grab_text'];
            // document.getElementsByClassName('list-con')[level+10].nextElementSibling.children[0].innerText = this.coinTxt['mine_grab_text'];
            // document.getElementsByClassName('list-con')[level].children[2].innerText = this.coinTxt['mine_grab_text'];
          } else {
            // console.log('seconds',this.downSecond)
            this.$set(this, 'downMinute', obj.minutes);
            this.$set(this, 'downSecond', obj.seconds);
            // console.log('downSecond',this.downSecond)
            // console.log(document.getElementsByClassName('list-con')[level+3].nextElementSibling)
            // console.log(document.getElementsByClassName('list-con')[level+10].nextElementSibling.children[0].innerText)
            // document.getElementsByClassName('list-con')[level+3].nextElementSibling.children[0].innerText = '距离出征'+obj.minutes+':'+obj.seconds;
            // document.getElementsByClassName('list-con')[level+10].nextElementSibling.children[0].innerText = '距离出征'+obj.minutes+':'+obj.seconds;
          }

        }, 1000);
      },
      /**
       * 抢购退出
       */
      quitMin() {
        let _this = this;
        try {
          if (plus) {
            mui.confirm('确定退出抢购', (action) => {
              if (action.index == 0) {
                _this.quitFlag = false;
                _this.clearMiningTime();
              } else {
                console.log('app cancel');
              }
            })
          }
        } catch (e) {
          mui.confirm('确定退出抢购', (action) => {
            if (action.index == 1) {
              console.log('web confirm');
              _this.quitFlag = false;
              _this.clearMiningTime();
            } else {
              console.log('web cancel');
            }
          })
        }
      },
      /**
       * 抢购的所有定时器
       */
      miningTimeGroup() {
        let _this = this;
        //3分钟 请求结果
        this.mineTime = setTimeout(() => {
          setTimeout(() => {
            this.resultInt = setInterval(() => {
              this.getoreResult(this.level);
            }, 3000);
          }, this.randomTime * 1000);
        }, 180000);
        //5分钟超时截断跳转
        this.lastTime = setTimeout(() => {
          mui.alert('抢购过於热情，请前往记录查看抢购详情', () => {
            _this.$router.push({ name: 'Mine' })
          })
        }, 300000);
      },
      /**
       * 抢矿结果
       */
      getoreResult(level) {
        Index.getoreResult({ level }).then(res => {
          if (res.code == 1) {
            this.$router.push({ path: res.data.url })
          }
          else {
            return;
          }
        })
      },
      /**
       * 开始抢购
       */
      startMining() {
        this.quitFlag = true;
        this.miningTimeGroup();
      },
      /**
       * 清除抢购的定时器
       */
      clearMiningTime() {
        clearInterval(this.resultInt);
        clearTimeout(this.mineTime);
        clearTimeout(this.lastTime);
      }
    },
    beforeRouteLeave(to, from, next) {
      clearInterval(this.mineInt);
      clearInterval(this.timeInt);
      clearInterval(this.resultInt);
      clearTimeout(this.mineTime);
      clearTimeout(this.lastTime);
      next();
    }
  };
</script>
<style lang="less" scoped>
  @import "~link-less";
  .disabled {
    pointer-events: none;
  }
  .page {
    // background-image: url("../../assets/images/bg.png");
    // background-image: linear-gradient(#f95f5f, #731515);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }
  .body {
    // background-color: @bg-color;
    // background-image: url("../../assets/images/bg.png");
    // background-size: cover;
    // background-repeat: no-repeat;

    line-height: 36px;
    // .body-bg();
    background: url("../../assets/images/new/bg.png") scroll;
    background-size: 100% 100%;
    @keyframes lunbo {
      from {
        transform: translateX(580px);
      }
      to {
        transform: translateX(-100%);
      }
    }
    .swiper-wrap .title-img {
      height: 300px;
      width: 100%;
    }
    .notice {
      position: relative;
      background-image: url(../../assets/images/index-notice-bg.png);
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      margin: 0 2%;
      height: 87px;
      margin-top: 16px;
      font-size: 16px;
      font-weight: 400;
      color: rgba(32, 33, 32, 1);
      font-size: 24px;
      overflow: hidden;
      z-index: 999;
      i,
      span {
        vertical-align: top;
        font-size: 12px;
      }
      .content {
        width: 580px;
        height: 100%;
        overflow: hidden;
        display: flex;
        align-items: center;
        position: absolute;
        left: 112px;
        top: 0;
      }
      .notice-inner {
        position: absolute;
        top: 0;
        background: transparent;
        animation-name: lunbo;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        z-index: 3;
        display: flex;
        height: 100%;
        align-items: center;
        > i {
          font-size: 28px;
        }
      }
      .notice-list {
        display: inline-block;
      }
      .notice-item {
        color: rgba(32, 33, 32, 1);
        background: transparent;
        font-size: 28px;
        white-space: nowrap;
      }
    }
    .banner {
      width: 100%;
      height: 300px;
    }
    .nm-titl {
      /*position: fixed;*/
      /*top: 650px;*/
      margin-left: 50%;
      transform: translateX(-50%);
      padding: 60px 0 40px;
      /*margin-top: 650px;*/
    }
    .list {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      padding: 20px 24px 0;
      .item {
        width: 48%;
        /*padding: 20px;*/
        box-sizing: border-box;
        margin-top: 30px;
        text-align: center;
        position: relative;
        border: 4px solid #f9d560;
        border-radius: 10px;
        .img-wrap {
          position: relative;
          width: 100%;
          height: 480px;
          font-size: 0;
          border-radius: 10px 10px 0 0;
          overflow: hidden;
          background-color: #fff;
          .img {
            width: 100%;
            height: 100%;
          }
          .tag {
            width: 100px;
            border-radius: 50px;
            position: absolute;
            bottom: 20px;
            right: 20px;
            z-index: 9;
            font-size: 28px;
            color: #ffffff;
          }
        }
        .con-wrap {
          padding: 10px;
          color: #333;
          background-color: #fff;
          text-align: left;
          padding-bottom: 60px;
          box-sizing: border-box;
          background-image: url('../../assets/images/tips-bg.jpg');
          background-size: cover;
          background-repeat: no-repeat;
          background-position: center;
          .title {
            padding-bottom: 10px;
            text-align: center;
            font-weight: 700;
            color: #333;
            font-size: 30px;
          }
          li {
            font-size: 24px;
          }
        }
        .btns {
          width: 100%;
          padding: 0 20px;
          box-sizing: border-box;
          left: 0;
          position: absolute;
          bottom: -20px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          > div {
            border-radius: 50px;
          }
          .type-btn {
            width: 48%;
            height: 70px;
            line-height: 70px;
            margin: 0 auto;
            display: block;
            text-align: center;
            color: @bg-color-white;
            font-size: 30px;
            letter-spacing: 1px;
            border-radius: 8px;
          }
        }
      }
    }
    // .list {
    //   margin: 0 auto;
    //   width: 150%;
    //   margin-left: -25%;
    //   font-size: 0px;
    //   height: 1020px;
    //   .swiper-myitem {
    //     text-align: center;
    //     position: relative;
    //     background: rgba(1, 1, 1, 0.6);
    //     border-radius: 20px;
    //     padding: 10px 0 30px 0;
    //     margin-top: 30px;
    //   }
    //   .btns {
    //     position: absolute;
    //     width: 100%;
    //     left: 50%;
    //     transform: translateX(-50%);
    //     -webkit-transform: translateX(-50%);
    //     bottom: -50px;
    //     > div {
    //       border-radius: 50px;
    //     }
    //   }
    //   .list-con {
    //     display: inline-block;
    //     padding-bottom: 16px;
    //     font-size: 22px;
    //     border-radius: 8px;
    //     min-width: 420px;
    //     .img-wrap {
    //       text-align: center;
    //       background-size: 100%;
    //       background-position: 100% 90%;
    //       background-repeat: no-repeat;
    //       .img {
    //         min-height: 360px;
    //         max-width: 90%;
    //       }
    //     }
    //     .con-wrap {
    //       padding: 10px;
    //       color: #ddd;
    //       .title {
    //         padding-bottom: 10px;
    //         text-align: center;
    //         font-weight: 700;
    //         color: #fffc00;
    //         font-size: 30px;
    //       }
    //     }
    //     .bg1 {
    //       background: linear-gradient(
    //         90deg,
    //         rgba(108, 234, 114, 1) 0%,
    //         rgba(26, 184, 0, 1) 98%
    //       );
    //     }
    //     .bg2 {
    //       background: rgba(68, 66, 90, 1);
    //     }
    //     .bg3 {
    //       background: linear-gradient(
    //         90deg,
    //         rgba(245, 190, 40, 1) 0%,
    //         rgba(255, 132, 42, 1) 100%
    //       );
    //     }
    //     .bg4 {
    //       background: linear-gradient(
    //         -90deg,
    //         rgba(254, 45, 45, 1) 0%,
    //         rgba(255, 96, 96, 1) 100%
    //       );
    //     }
    //   }
    //   .type-btn {
    //     width: 80%;
    //     height: 68px;
    //     line-height: 68px;
    //     margin: 20px auto;
    //     display: block;
    //     text-align: center;
    //     color: @bg-color-white;
    //     font-size: 32px;
    //     letter-spacing: 1px;
    //     border-radius: 8px;
    //   }
    // }
    // .msg {
    //   width: 100%;
    //   text-align: center;
    //   margin-top: 20%;
    // }

    // .myswiper-pre {
    //   transform: translate3d(0px, 0px, -100px) rotateX(0deg) rotateY(-50deg) !important;
    // }
    // .myswiper-next {
    //   .transform(translate3d(0px, 0px, -100px) rotateX(0deg) rotateY(50deg));
    // }
  }
  .mining-layer {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.1);
    .display-flex();
    align-items: center;
    justify-content: center;
    flex-direction: column;
    .mining-con {
      text-align: center;
      position: relative;
      i {
        background-color: #ddd;
        border-radius: 50%;
        vertical-align: top;
        width: 40px;
        height: 40px;
        position: absolute;
        right: 6%;
        top: 100px;
      }
      .mining-img {
        width: 80%;
      }
    }
  }
</style>
<style lang="less">
.tips-model {
  text-align: center;
      img {
        height:100%;
      }
    }
  ._v-container {
    height: 300px !important;
    margin-top: -40px !important;
    z-index: 2;
  }
  ._v-container > ._v-content > .loading-layer .spinner-holder .spinner,
  ._v-container > ._v-content > .pull-to-refresh-layer .spinner-holder .spinner {
    margin-top: 0 !important;
    fill: white !important;
    stroke: white !important;
    z-index: 1;
  }
  .swiper-slide-prev {
    transform: translate3d(0px, 0px, -100px) rotateX(0deg) rotateY(-50deg) !important;
  }
  .swiper-slide-next {
    transform: translate3d(0px, 0px, -100px) rotateX(0deg) rotateY(50deg) !important;
  }
  .swiper-container-3d .swiper-slide-shadow-left,
  .swiper-container-3d .swiper-slide-shadow-right {
    background-image: none;
  }
  .swiper-container-banner-box {
    width: 700px!important;
    height: 340px;
    margin-top: 20px;
    img {
      border-radius: 20px !important;
    }
  }
  .page-banner {
    width: 100%;
    height: 530px;
    position: relative;
    &-bg-1 {
      width: 100%;
      height: 100%;
    }
    .swiper-container-banner-box {
      position: absolute;
      top: 60px;
      left: 25px;
      z-index: 1;
      margin-top: 0;
    }
    &-bg-2 {
      width: 520px;
      z-index: 2;
      position: absolute;
      bottom: 0;
      left: 115px;
    }
  }
  .m-titl {
    margin: 30px auto 0;
  }
</style>
